<div class="flex flex-col flex-auto w-full p-4 sm:p-4">
	<div class="flex items-center justify-between mb-4 mx-3">
		<h1 class="text-3xl font-medium tracking-tight leading-none">Prompt Library</h1>
		<div>
			<button mat-flat-button color="primary" [routerLink]="newPromptPath" data-testid="new-prompt-btn">
				<mat-icon svgIcon="heroicons_outline:plus"></mat-icon>
				<span class="ml-2">New</span>
			</button>
			<button
				mat-flat-button
				[matTooltip]="'Refresh List'"
				(click)="refreshPrompts()"
				[disabled]="isLoading()"
				class="ml-4"
				data-testid="refresh-btn">
				<mat-icon [svgIcon]="'heroicons_outline:arrow-path'"></mat-icon>
			</button>
		</div>
	</div>

	<div class="overflow-auto bg-card rounded-lg shadow">
		@let state = promptsState(); @switch (state.status) { @case ('idle') {
		<div class="p-8 text-center text-secondary" data-testid="loading-view">
			<p>Initializing prompts list...</p>
		</div>
		} @case ('loading') {
		<div class="p-8 text-center text-secondary" data-testid="loading-view">
			<mat-spinner [diameter]="48"></mat-spinner>
			<p class="mt-2">Loading prompts...</p>
		</div>
		} @case ('success') { @if (state.data && state.data.length > 0) {
		<div class="mat-elevation-z0">
			<table mat-table [dataSource]="state.data" class="w-full" [trackBy]="trackByPromptId" data-testid="prompts-table">
				<!-- Name Column -->
				<ng-container matColumnDef="name">
					<th mat-header-cell *matHeaderCellDef>Name</th>
					<td mat-cell *matCellDef="let prompt">{{ prompt.name }}</td>
				</ng-container>

				<!-- Tags Column -->
				<ng-container matColumnDef="tags">
					<th mat-header-cell *matHeaderCellDef>Tags</th>
					<td mat-cell *matCellDef="let prompt">
						<span *ngIf="prompt.tags && prompt.tags.length > 0; else noTagsInCell">{{ prompt.tags?.join(', ') }}</span>
						<ng-template #noTagsInCell>N/A</ng-template>
					</td>
				</ng-container>

				<!-- Last Updated Column -->
				<ng-container matColumnDef="updatedAt">
					<th mat-header-cell *matHeaderCellDef>Last Updated</th>
					<td mat-cell *matCellDef="let prompt">{{ prompt.updatedAt | date: 'mediumDate' }} at {{ prompt.updatedAt | date: 'shortTime' }}</td>
				</ng-container>

				<!-- Actions Column -->
				<ng-container matColumnDef="actions">
					<th mat-header-cell *matHeaderCellDef>Actions</th>
					<td mat-cell *matCellDef="let prompt">
						<button
							mat-icon-button
							(click)="editPrompt(prompt.id); $event.stopPropagation()"
							matTooltip="Edit Prompt"
							aria-label="Edit Prompt"
							[attr.data-testid]="'edit-btn-' + prompt.id">
							<mat-icon svgIcon="heroicons_outline:pencil-square"></mat-icon>
						</button>
						<button
							mat-icon-button
							color="warn"
							(click)="deletePrompt($event, prompt)"
							[disabled]="isDeletingSignal() === prompt.id"
							matTooltip="Delete Prompt"
							aria-label="Delete Prompt"
							class="ml-1"
							[attr.data-testid]="'delete-btn-' + prompt.id">
							<mat-icon *ngIf="isDeletingSignal() !== prompt.id" svgIcon="heroicons_outline:trash"></mat-icon>
							<mat-progress-spinner
								*ngIf="isDeletingSignal() === prompt.id"
								[diameter]="20"
								mode="indeterminate"
								[attr.data-testid]="'delete-spinner-' + prompt.id"></mat-progress-spinner>
						</button>
					</td>
				</ng-container>

				<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
				<tr
					mat-row
					*matRowDef="let row; columns: displayedColumns"
					(click)="editPrompt(row.id)"
					class="hover:bg-gray-100 dark:hover:bg-hover cursor-pointer"
					[attr.data-testid]="'prompt-row-' + row.id"></tr>
			</table>
		</div>
		} @else {
		<div class="p-8 text-center text-secondary" data-testid="no-prompts-view">
			<mat-icon svgIcon="heroicons_outline:document-text" class="!w-16 !h-16 text-gray-400 mb-4"></mat-icon>
			<p class="text-xl text-gray-500">No prompts found.</p>
			<p class="text-gray-400">Click "New" to get started.</p>
		</div>
		} } @case ('error') {
		<div class="p-8 text-center text-red-500" data-testid="error-view">
			<mat-icon svgIcon="heroicons_outline:exclamation-triangle" class="!w-16 !h-16 mb-4"></mat-icon>
			<p class="text-xl">Failed to load prompts.</p>
			<p class="text-sm mb-4">{{ state.error?.message || 'An unknown error occurred.' }}</p>
			<button mat-stroked-button color="warn" (click)="refreshPrompts()">Retry</button>
		</div>
		} }
	</div>
</div>
